<template>
  <div>
    <Header :left="true" leftText="返回" title="LPA线上月抽查" />
    <div>
      <van-tabs
        v-model="active"
        type="card"
        :offset-top="80"
        :sticky="true"
        @click="tabChange"
        swipeable
        style="top: 8px; font-size: 15px"
        color="#1c6c8d"
      >
        <!-- 待抽查 -->
        <van-tab title="待检查" style="font-size: 15px">
          <van-row style="margin-top: 10px">
            <van-col
              ><van-image
                width="40"
                height="30"
                style="margin-left: -10px"
                src="assets/block.png"
            /></van-col>
            <van-col class="message">待检查记录</van-col>
          </van-row>
          <div class="textScroll">
            <!-- 循环数据开始 -->
            <div v-for="item in itemsOne" :key="item.id">
              <div style="width: 100%; background-color: #f3f4f8; height: 5px">
                <span></span>
              </div>
              <div class="divStyle" @click.prevent="showDetail(item)">
                <van-row style="margin-top: 10px; margin-left: 10px">
                  <van-col span="8" style="font-weight: bold; color: #a9a9a9">{{
                    item.equipName
                  }}</van-col>
                  <van-col span="14" style="color: #a9a9a9"
                    ><van-icon name="assets/time.png" />
                    {{ item.finishTime }}</van-col
                  >
                </van-row>
                <van-divider />
                <van-row style="margin-left: 10px">
                  <van-col span="18" style="color: #a9a9a9"
                    >设备编码：{{ item.equipCode }}</van-col
                  >
                </van-row>
                <van-row style="margin-left: 10px; margin-top: 10px">
                  <van-col span="18" style="color: #a9a9a9"
                    >任务单号：{{ item.taskCode }}</van-col
                  >
                </van-row>
                <van-row style="margin-left: 10px; margin-top: 10px">
                  <van-col span="18" style="color: #a9a9a9"
                    >执行人：{{ item.executer }}</van-col
                  >
                  <van-col span="3"
                    ><van-button
                      color="#f58220"
                      style="
                        width: 75px;
                        height: 30px;
                        margin-bottom: 10px;
                        right: 0px;
                      "
                      type="primary"
                      text="待检查"
                  /></van-col>
                  <!-- <van-col span="3"><van-image width="40" height="30" src="assets/noAssign.png"/></van-col> -->
                </van-row>
              </div>
            </div>
            <!-- 循环数据结束 -->
          </div>
        </van-tab>
        <!-- 已抽查 -->
        <van-tab title="已检查">
          <van-row style="margin-top: 20px">
            <van-col
              ><van-image
                width="40"
                height="30"
                style="margin-left: -10px"
                src="assets/block.png"
            /></van-col>
            <van-col class="message">已检查记录</van-col>
          </van-row>
          <div class="textScroll2">
            <!-- 循环数据开始 -->
            <van-list
              v-model="loading"
              :finished="finished"
              finished-text="没有更多了"
              @load="onLoad"
            >
              <div v-for="item in itemsTwo" :key="item.id">
                <div
                  style="width: 100%; background-color: #f3f4f8; height: 5px"
                >
                  <span></span>
                </div>
                <div class="divStyle">
                  <van-row style="margin-top: 10px; margin-left: 10px">
                    <van-col
                      span="13"
                      style="font-weight: bold; color: #a9a9a9"
                      >{{ item.equipName }}</van-col
                    >
                    <van-col span="11" style="color: #a9a9a9"
                      ><van-icon name="assets/time.png" />
                      {{ item.finishTime }}</van-col
                    >
                  </van-row>
                  <van-divider />
                  <van-row style="margin-left: 10px">
                    <van-col span="18" style="color: #a9a9a9"
                      >设备编码：{{ item.equipCode }}</van-col
                    >
                  </van-row>
                  <van-row style="margin-left: 10px; margin-top: 10px">
                    <van-col span="20" style="color: #a9a9a9"
                      >任务单号：{{ item.taskCode }}</van-col
                    >
                  </van-row>
                  <van-row style="margin-top: 10px; margin-left: 10px">
                    <van-col span="18" style="color: #a9a9a9"
                      >执行人：{{ item.executer }}</van-col
                    >
                  </van-row>
                  <van-row style="margin-top: 10px; margin-left: 10px">
                    <van-col span="10" style="hight: 20px; color: #a9a9a9"
                      >检查人：{{ item.checkUser }}</van-col
                    >
                  </van-row>
                  <van-row style="margin-top: 10px; margin-left: 10px">
                    <van-col span="20" style="color: #a9a9a9"
                      >检查时间：{{ item.endTime }}</van-col
                    >
                    <van-col span="3"
                      ><van-button
                        color="#f58220"
                        style="
                          width: 75px;
                          height: 30px;
                          margin-bottom: 10px;
                          right: 20px;
                        "
                        type="primary"
                        text="已检查"
                    /></van-col>
                  </van-row>
                </div>
              </div>
            </van-list>

            <!-- 循环数据结束 -->
          </div>
        </van-tab>
      </van-tabs>
    </div>
  </div>
</template>
<script>
import {
  Icon,
  Button,
  CellGroup,
  Cell,
  Field,
  tab,
  tabs,
  Col,
  Row,
  Image as VanImage,
  Divider,
  Checkbox,
  Pagination,
  Panel,
  Toast,
  Dialog,
  List,
  Tag,
} from "vant";
import { _httpClient } from "@/libs/api";
import { storage } from "@/libs/utils";
import {
  removeToken,
  getToken,
  setBaseApiFrefix,
  getBaseApiFrefix,
} from "@/libs/auth";
import { memory } from "@/libs/utils";
Vue.use(Cell);
Vue.use(Tag);
Vue.use(Field);
Vue.use(CellGroup);
Vue.use(tab);
Vue.use(tabs);
Vue.use(Button);
Vue.use(Col);
Vue.use(Row);
Vue.use(Icon);
Vue.use(VanImage);
Vue.use(Divider);
Vue.use(Checkbox);
Vue.use(Pagination);
Vue.use(Panel);
Vue.use(Dialog);
Vue.use(List);
import Header from "@/components/header.vue";
import apicloud from "@/libs/apicloud";
export default {
  components: {
    Button,
    Header,
    Icon,
    CellGroup,
    Cell,
    Field,
    tab,
    tabs,
    Col,
    Row,
  },

  data() {
    return {
      //动态加载数据
      loading: false,
      finished: false,
      showDialog: false,
      user: [], //登录用户信息
      shiftFinishedNum: 0, //当班任务完成数量
      extractNum: null, //抽取数量
      //分页参数
      queryParams: {
        pageNum: 1,
        pageSize: 5,
        total: 0,
      },

      //下拉刷新动态
      loadParams: {
        pageNum: 1,
        pageSize: 5,
        total: 0,
      },

      allSelected: false,
      screenWidth: 0,
      checked: true,
      active: 2,
      currentPage: 1,
      fileUrl: "",
      itemsOne: [
        // { id: 1, equip: '注塑机1', time: '2020-12-02 22:08:00', user: '测试账户1', checked: true },
        // { id: 2, equip: '注塑机2', time: '2020-12-03 22:08:00', user: '测试账户2', checked: false },
        // { id: 3, equip: '注塑机3', time: '2020-12-03 22:08:00', user: '测试账户3', checked: true },
        // { id: 4, equip: '注塑机4', time: '2020-12-03 22:08:00', user: '测试账户4', checked: true },
        // { id: 5, equip: '注塑机5', time: '2020-12-03 22:08:00', user: '测试账户5', checked: false },
      ],
      itemsTwo: [], //已指派列表
    };
  },
  created: function () {
    let oldHight = api.winWidth;
    this.screenWidth = oldHight;
    //获取当前系统登录用户
    this.user = JSON.parse(storage.get("user"));
    //alert(this.user.remark);
    //alert(JSON.stringify(this.user));
    let tkn = getToken();
    if (!tkn) {
      api.openWin({
        name: "login",
        url: "./login-login.html",
        rect: {
          x: 0,
          y: 150,
          w: api.winWidth,
          h: api.winHeight,
        },
      });
    }

    this.queryWaitCheckTaskList();
  },
  methods: {
    //已指派数据动态加载
    onLoad() {
      //页数+1
      this.loadParams.pageNum = this.loadParams.pageNum + 1;
      // 异步更新数据
      // setTimeout 仅做示例，真实场景中一般为 ajax 请求
      setTimeout(() => {
        //this.queryCheckedTaskList();
        // 加载状态结束
        this.loading = false;

        // 数据全部加载完成
        if (this.itemsTwo.length >= this.loadParams.total) {
          this.finished = true;
        }
      }, 1000);
    },

    //查询已检查任务
    async queryCheckedTaskList() {
      let _this = this;
      Toast.loading({
        mask: true,
        forbidClick: true,
        duration: 0,
        message: "查询中...",
      });
      try {
        let res = await _httpClient.post(
          _httpClient.getApiPrefix() + "/app/my/qualit/listLPA",
          { body: { batchno: _this.user.remark, isfinished: "1", tasktype: "2" } }
        );

        if (res.code === 200) {
          Toast.clear();
          _this.itemsTwo = res.rows;
        } else {
          Toast.fail(res.msg);
        }
      } catch (e) {
        alert(JSON.stringify(e));
        Toast.fail(JSON.stringify(e));
      }
    },

    //tab切换
    tabChange(name, title) {
      if (name == 0) {
        //待指派界面
        this.queryWaitCheckTaskList();
      } else if (name == 1) {
        //已指派界面
        this.queryCheckedTaskList();
      }
    },
    //详情展示
    showDetail(item) {
      //查询点检项相关信息
      this.queryNoEditTask(
        {
          body: {
            taskCode: item.taskCode,
            siteKey: item.siteKey,
            equipCode: item.equipCode,
          },
        },
        item
      );
    },

    //查询待检查任务
    async queryWaitCheckTaskList() {
      let _this = this;
      Toast.loading({
        mask: true,
        forbidClick: true,
        duration: 0,
        message: "加载中...",
      });
      //先抽取最新数据
      try {
        let res = await _httpClient.post(
          _httpClient.getApiPrefix() + "/app/my/qualit/extractShiftTaskLPA/",
          {
            body: {
              batchNum: _this.extractNum,
              type: "0",
              batchNo: _this.user.remark,
              tastType: "2",
            },
          }
        );
        if (res.code === 200) {
          try {
            let res = await _httpClient.post(
              _httpClient.getApiPrefix() + "/app/my/qualit/listLPA",
              { body: { batchno: _this.user.remark, isfinished: "0", tasktype: "2" } }
            );
            if (res.code === 200) {
              Toast.clear();
              _this.itemsOne = res.rows;
            } else {
              Toast.fail(res.msg);
            }
          } catch (e) {
            alert(JSON.stringify(e));
            Toast.fail(JSON.stringify(e));
          }
          _this.extractNum = null;
        } else {
          Toast.fail(res.msg);
        }
      } catch (e) {
        alert(JSON.stringify(e));
        Toast.fail(JSON.stringify(e));
      }
    },

    //打开抽取弹窗
    async openExtractDialog() {
      let _this = this;
      _this.shiftFinishedNum = 0;
      //查询当班完成数量
      try {
        let res = await _httpClient.post(
          _httpClient.getApiPrefix() + "/app/my/qualit/shiftFinishTask/",
          {
            body: { siteKey: _this.user.site },
          }
        );

        if (res.code === 200) {
          Toast.clear();
          _this.shiftFinishedNum = res.total;
          _this.showDialog = true;
        } else {
          Toast.fail(res.msg);
        }
      } catch (e) {
        alert(JSON.stringify(e));
        Toast.fail(JSON.stringify(e));
      }
    },

    //檢查抽取确认
    async extractConfirm() {
      let _this = this;
      if (_this.extractNum == null || _this.extractNum == 0) {
        Toast("抽取數量需为正整数!");
        return;
      } else if (_this.extractNum > _this.shiftFinishedNum) {
        Toast("抽取數量不能大于当班已完成数量!");
        return;
      }
      if (_this.itemsOne.length > 0) {
        _this.$ac.confirm(
          {
            title: "提示",
            msg: "当前存在待检查的任务，是否确认再次抽取?",
            buttons: ["确定", "取消"],
          },
          function (ret, err) {
            if (ret.buttonIndex == 1) {
              _this.extractTask();
            } else if (ret.buttonIndex == 2) {
              return;
            }
          }
        );
      } else {
        _this.extractTask();
      }
    },

    async extractTask() {
      let _this = this;
      //抽取任务
      // try {
      //   let res = await _httpClient.post(_httpClient.getApiPrefix() + '/app/my/qualit/extractShiftTaskLPA/', {
      //     body: {batchNum: _this.extractNum, type: '0',batchNo:"123", tastType:"0"},
      //   })

      //   if (res.code === 200) {
      //     Toast('任务抽取成功!')
      //     _this.queryWaitCheckTaskList()
      //     _this.extractNum = null
      //   } else {
      //     Toast.fail(res.msg)
      //   }
      // } catch (e) {
      //   alert(JSON.stringify(e))
      //   Toast.fail(JSON.stringify(e))
      // }
    },

    //检查任务
    async queryNoEditTask(data, item) {
      Toast.loading({
        mask: true,
        forbidClick: true,
        duration: 0,
        message: "请稍等...",
      });
      let that = this;
      try {
        let res = await _httpClient.post(
          _httpClient.getApiPrefix() + "/equip/check/isExist",
          data
        );
        Toast.clear();
        if (res.code === 200) {
          if (res.taskItemList) {
            //跳转到点检页面
            this.$ac.openWin({
              name: "task_finish_check",
              url: "./my-task_finish_check.html",
              pageParam: {
                qualityItem: item,
                equipCode: data.body.equipCode,
                taskItemList: res.taskItemList,
                taskFileList: res.taskFileList,
                isCanEdit: false,
              },
            });
            api.addEventListener(
              {
                name: "checkFinish",
              },
              function (ret, err) {
                if (ret.value.qualityItem.isFinished == "1") {
                  that.queryWaitCheckTaskList();
                }
              }
            );
          }
        } else {
          Toast.fail(res.msg);
        }
      } catch (e) {
        Toast.fail(JSON.stringify(e));
      }
    },
  },
};
</script>
<style>
body {
  background-color: White;
}

.pic {
  width: 100%;
  text-align: center;
}

.divMedia {
  margin-top: 10px;
  height: 190px;
  border: solid #dcdcdc;
  margin-left: 5px;
  margin-right: 15px;
  border-top-width: 4px;
  border-left-width: 4px;
  border-right-width: 1px;
}

.clickbtn {
  width: 1;
  margin: 5px 10px;
  line-height: 45px;
  border: 1px #ccc dashed;
  text-align: center;
}
.buttonRight {
  position: fixed;
  margin-top: -40px;
  right: 15px;
  width: 90px;
  height: 40px;
  background-color: #1c6c8d;
  border-color: #1c6c8d;
}
.buttonLeft {
  position: fixed;
  margin-top: -40px;
  right: 110px;
  width: 90px;
  height: 40px;
  background-color: #1c6c8d;
  border-color: #1c6c8d;
}
.message {
  font-size: 20px;
  margin-top: 0px;
  margin-left: -10px;
  font-weight: bold;
}
.divStyle {
  /* border: 1px solid #dcdcdc; */
  border-top-width: 3px;
  border-left-width: 3px;
  margin-left: 3px;
  margin-right: 3px;
  margin-top: 4px;
}
.pagination {
  position: fixed;
  width: 100%;
  color: rgb(0, 0, 255);
  text-align: center;
}
.textScroll {
  display: inline-block;
  position: fixed;
  top: 10rem;
  bottom: 5px;
  overflow: scroll;
  right: 0;
  width: 100%;
  margin-bottom: 1rem;
  z-index: 1;
}
.textScroll2 {
  display: inline-block;
  position: fixed;
  top: 10rem;
  left: 0;
  bottom: 2px;
  overflow-y: scroll;
  width: 100%;
  margin-bottom: 1.7rem;
  z-index: 1;
  overflow-x: hidden;
  /*解决ios上滑动不流畅*/
  -webkit-overflow-scrolling: touch;
}
</style>
